// 存储effects的桶
const bucket = new Set()

// 响应式数据源
const data = { text: 'hello world' }

// 副作用函数
function effect() {
  document.body.innerText = obj.text
}

// 数据的代理
const obj = new Proxy(data, {
  // 拦截读取操作
  get(target, key) {
    bucket.add(effect) // 问题，这里的effect存在重复收集的过程
    return Reflect.get(target, key)
  },
  // 拦截设置操作
  set(target, key, val) {
    Reflect.set(target, key, val)
    bucket.forEach((fn) => fn())
    return true
  },
})

// 为了第一次看到效果，手动执行一次
effect()
setTimeout(() => {
  obj.text = '我变化了'
}, 2000)
